<template>
  <div class="gdap-homepage">
    <div>
      <img src="../../assets/1920_937/home_modular_lift_default.png" class="gdap-homepage-1">
    </div>
    <div>
      <img src="../../assets/1920_937/home_modular_right_lower_default.png" class="gdap-homepage-2">
    </div>
    <div>
      <img src="../../assets/1920_937/home_modular_right_default.png" class="gdap-homepage-3">
    </div>
    <div class="container" style="cursor: pointer" v-if="!isLogin">
      <router-link to="/step/estimatescore">
        <img
          src="../../assets/1920_937/home_modular_middle_lower_default.png"
          alt
          class="gdap-homepage-4"
        >
      </router-link>

      <div class="overlay">
        <div>
          <transition name="el-zoom-in-top">
            <div class="gdap-login" v-show="show&&!showResetFrom">
              <p
                style="font-family:SiYuanBold;color:rgb(207, 139, 50);font-size:1.5em;text-align: center;margin:12px 0;"
              >登录</p>
              <el-row>
                <el-col :span="2">&nbsp;</el-col>
                <el-col :span="20">
                  <el-form
                    :model="loginForm"
                    :rules="rulesLogin"
                    status-icon
                    ref="loginForm"
                    class="demo-ruleForm"
                  >
                    <el-form-item prop="username">
                      <el-input
                        v-model="loginForm.username"
                        autocomplete="off"
                        placeholder="请输入手机号"
                        style="width: 100%;"
                      ></el-input>
                    </el-form-item>
                    <el-form-item prop="pass">
                      <el-input
                        type="password"
                        v-model="loginForm.pass"
                        autocomplete="off"
                        placeholder="请输入密码"
                        style="width: 100%;"
                      ></el-input>
                    </el-form-item>
                    <div style="text-align: right;">
                      <a
                        class="gdap-forget"
                        style="cursor:pointer;color:#FF6864"
                        @click="fnShowReset"
                      >忘记密码？</a>&nbsp;
                      <a style="cursor:pointer;color:#409EFF" @click="showRegis">注册</a>
                    </div>
                    <div style="text-align: right;">
                      <el-button
                        @click="handleClose('loginForm')"
                        style="width:38%;margin-left: 12%;"
                        size="small"
                      >取消</el-button>
                      <el-button
                        type="primary"
                        @click="handleSubmit('loginForm')"
                        style="width:38%"
                        size="small"
                      >登录</el-button>
                    </div>
                  </el-form>
                </el-col>
              </el-row>
            </div>
            <!-- <div class="gdap-login" v-show="show&&!showResetFrom">
              <p style="font-family:SiYuanBold;color:rgb(207, 139, 50);font-size:1em;text-align: center;margin-top:6%;margin-bottom: 8%;">登&nbsp;&nbsp;录</p>
              <el-form :model="loginForm" :rules="rulesLogin" status-icon ref="loginForm" label-width="120px" class="demo-ruleForm" >
                <el-form-item  label-width="30%" prop="username">
                  <el-input v-model="loginForm.username" autocomplete="off"  placeholder="请输入手机号" style="margin:0 -20%"></el-input>
                </el-form-item>
                <el-form-item  label-width="30%" prop="pass">
                  <el-input type="password" v-model="loginForm.pass" autocomplete="off"  placeholder="请输入密码" style="margin:0 -20%"></el-input>
                </el-form-item>
               <div style="text-align: right;margin:3% 15%">
                  <a class="gdap-forget" style="cursor:pointer;color:#FF6864" @click="fnShowReset">忘记密码？</a>&nbsp;
                  <a style="cursor:pointer;color:#409EFF" @click="showRegis">注册</a>
                </div>

                <el-button @click="loginResetClose('loginForm')" style="width:38%;margin-left: 12%;" >取消
                </el-button>
                <el-button type="primary" @click="handleSubmit('loginForm')" style="width:38%" >登录
                </el-button>
              </el-form>
            </div>-->
          </transition>
          <transition name="el-zoom-in-top">
            <!-- 重置密码 -->
            <div class="gdap-reset" v-show="show&&showResetFrom">
              <p
                style="font-family:SiYuanBold;color:rgb(207, 139, 50);font-size:1.5em;text-align: center;margin:12px 0;"
              >找回密码</p>
              <el-row>
                <el-col :span="2">&nbsp;</el-col>
                <el-col :span="20">
                  <el-form
                    :model="resetPaswdFrom"
                    :rules="rulesReset"
                    status-icon
                    ref="resetPaswdFrom"
                    style="margin-top: 6%;"
                    class="demo-ruleForm"
                  >
                    <el-form-item style="margin-bottom:8%" prop="username">
                      <el-input
                        v-model="resetPaswdFrom.username"
                        autocomplete="off"
                        placeholder="请输入手机号"
                        style="width: 100%;"
                        size="small"
                      ></el-input>
                    </el-form-item>
                    <el-form-item style="margin-bottom:8%" prop="password">
                      <el-input
                        type="password"
                        v-model="resetPaswdFrom.password"
                        autocomplete="off"
                        placeholder="请输入密码"
                        style="width: 100%;"
                        size="small"
                      ></el-input>
                    </el-form-item>
                    <el-form-item style="margin-bottom:8%;font-size:12px" prop="passwordCheck">
                      <el-input
                        type="password"
                        v-model="resetPaswdFrom.passwordCheck"
                        autocomplete="off"
                        placeholder="请确认密码"
                        style="width: 100%;"
                        size="small"
                      ></el-input>
                    </el-form-item>
                    <el-form-item style="margin-bottom:8%" prop="messageCode">
                      <el-input
                        type="text"
                        v-model="resetPaswdFrom.messageCode"
                        autocomplete="off"
                        placeholder="请输入验证码"
                        style="width: 100%;"
                        size="small"
                      >
                        <el-button
                          slot="append"
                          type="primary"
                          @click="fnSendResetMessageCode"
                          :disabled="IsDisabledReset "
                          size="small"
                        >{{codeInfoReset}}</el-button>
                      </el-input>
                      <br>
                    </el-form-item>
                    <div style="text-align: center;">
                      <el-button type="text" plain @click="fnShowReset" size="small">返回登录</el-button>
                      <el-button
                        type="primary"
                        @click="fnResetpasswd('resetPaswdFrom')"
                        size="small"
                      >重置密码</el-button>
                    </div>
                  </el-form>
                </el-col>
              </el-row>
            </div>
          </transition>
          <transition name="el-zoom-in-bottom">
            <!-- 注册 -->
            <div class="gdap-register" v-show="!show">
              <p
                style="font-family:SiYuanBold;color:rgb(207, 139, 50);font-size:1.5em;text-align: center;margin:12px 0;"
              >注册</p>
              <el-row>
                <el-col :span="2">&nbsp;</el-col>
                <el-col :span="20">
                  <el-form
                    :model="registerForm"
                    :rules="rules"
                    status-icon
                    ref="registerForm"
                    style="margin-top: 6%;"
                    class="demo-ruleForm"
                  >
                    <el-form-item style="margin-bottom:5%" prop="username">
                      <el-input
                        v-model="registerForm.username"
                        autocomplete="off"
                        placeholder="请输入手机号"
                        style="width: 100%;"
                        size="small"
                      ></el-input>
                    </el-form-item>
                    <el-form-item style="margin-bottom:5%" prop="password">
                      <el-input
                        type="password"
                        v-model="registerForm.password"
                        autocomplete="off"
                        placeholder="请输入密码"
                        style="width: 100%;"
                        size="small"
                      ></el-input>
                    </el-form-item>
                    <el-form-item style="margin-bottom:5%;font-size:12px" prop="passwordCheck">
                      <el-input
                        type="password"
                        v-model="registerForm.passwordCheck"
                        autocomplete="off"
                        placeholder="请确认密码"
                        style="width: 100%;"
                        size="small"
                      ></el-input>
                    </el-form-item>

                    <el-form-item style="margin-bottom:5%;font-size:12px" prop="category">
                      <el-select
                        v-model="registerForm.category"
                        popper-class="my_class"
                        :popper-append-to-body="false"
                        placeholder="科类"
                        style="width: 100%;"
                        size="small"
                      >
                        <el-option
                          v-for="item in categoryList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item style="margin-bottom:5%;font-size:12px" prop="language">
                      <el-select
                        v-model="registerForm.language"
                        :popper-append-to-body="false"
                        placeholder="语种"
                        style="width: 100%;"
                        size="small"
                      >
                        <el-option
                          v-for="item in languageList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>

                    <el-form-item prop="messageCode">
                      <el-input
                        type="text"
                        v-model="registerForm.messageCode"
                        autocomplete="off"
                        placeholder="请输入验证码"
                        style="width: 100%;"
                        size="small"
                      >
                        <el-button
                          slot="append"
                          type="primary"
                          @click="fnSendMessageCode"
                          :disabled="IsDisabled "
                          size="small"
                        >{{codeInfo}}</el-button>
                      </el-input>
                      <br>
                    </el-form-item>
                    <div style="text-align: center;">
                      <el-button type="primary" @click="fnRegist('registerForm')" size="small">注册</el-button>
                      <el-button @click="reSetRegisFrom('registerForm')" size="small">重置</el-button>
                    </div>
                    <div>
                      <el-button type="text" plain @click="showRegis">已有账号？ 返回登录</el-button>
                    </div>
                  </el-form>
                </el-col>
              </el-row>
            </div>
          </transition>
        </div>

        <!-- <div style="  font-family:SiYuanBold;color:rgb(207, 139, 50);font-size:24px;text-align: center;" v-else>
          <p style="  font-family:SiYuanBold;color:rgb(207, 139, 50);font-size:24px;text-align: center;">根据需求推荐适合的院校</p>
          <p style="font-family:Oswald;color:rgb(187, 187, 187);font-size: 10px">COLLEGE MAJOR GUIDE</p>
          <img src="../../assets/1920_937/zytj.png" alt
            style="margin:10% 40%;horiz-align: center;font-size: 16px;display: block;">
          <el-button class="hh" style="margin-top:-15px">
            <router-link to="/step/estimatescore" style="text-decoration: none;color:#818181">开始推荐</router-link>
          </el-button>
        </div>-->
      </div>
    </div>
    <div class="container" style="cursor: pointer" v-if="isLogin">
      <router-link to="/step/estimatescore">
        <img src="../../assets/1920_937/d.png" alt class="gdap-homepage-4">
      </router-link>
    </div>
    <div>
      <img src="../../assets/1920_937/home_modular_middle_default.png" class="gdap-homepage-5">
    </div>

    <div class="container2" v-if="!isLogin">
      <img
        src="../../assets/1920_937/home_modular_lift_lower_default.png"
        alt
        class="gdap-homepage-6"
      >
      <!-- 未登录-->
      <div class="overlay2">
        <div>
          <p
            style="  font-family:SiYuanBold;color:rgb(207, 139, 50);font-size:1.3rem;text-align: center;"
          >志愿推荐免费体验</p>

          <p
            style="font-family:Oswald;color:rgb(187, 187, 187);font-size: 0.5em;text-align: center;"
          >
            请选择体验用户/
            <el-button type="text" @click="mzsmdialogVisible = true">免责声明</el-button>
          </p>

          <el-form ref="form" style="margin-left: 12%;">
            <!-- <el-form-item>
           <el-select v-model="selectIndex" placeholder="请选择体验用户">
      <el-option label="文史类(汉语言),566,排名1000" value="文史类(汉语言),566,排名1000"></el-option>
      <el-option label="文史类(汉语言),513,排名3000" value="beijing"></el-option>
      <el-option label="文史类(民考汉),414,排名1000" value="shanghai"></el-option>
      <el-option label="文史类(民语言),400,排名1500" value="beijing"></el-option>
      <el-option label="文史类(民语言),373,排名3000" value="shanghai"></el-option>
      <el-option label="理工类(汉语言),590,排名3000" value="beijing"></el-option>
      <el-option label="理工类(汉语言),515,排名10000" value="shanghai"></el-option>
      <el-option label="理工类(民考汉),494,排名1000" value="beijing"></el-option>
      <el-option label="理工类(民语言),304,排名5000" value="shanghai"></el-option>
      <el-option label="理工类(双语班),392,排名3000" value="beijing"></el-option>
    </el-select>
            </el-form-item>-->
            <el-form-item>
              <el-select
                v-model="selectIndex"
                placeholder="请选择"
                :popper-append-to-body="false"
                size="small"
                style="padding: 0 !important;"
              >
                <el-option
                  v-for="item in testUserLis"
                  :key="item.id"
                  :label="item.info"
                  :value="item.id"
                  size="small"
                  style="padding-left: 2% !important;"
                >
                  <span
                    style="float: left; word-wrap: break-word; font-size: 0.1rem; text-align: left;"
                  >{{ item.info }}</span>
                </el-option>
              </el-select>

              <!-- <el-radio-group v-model="selectIndex">

                <el-radio label="文史类(汉语言),566,排名1000"></el-radio>
                <el-radio label="文史类(汉语言),513,排名3000"></el-radio>
                <el-radio label="文史类(民考汉),414,排名1000"></el-radio>
                <el-radio label="文史类(民语言),400,排名1500"></el-radio>
                <el-radio label="文史类(民语言),373,排名3000"></el-radio>
                <el-radio label="理工类(汉语言),590,排名3000"></el-radio>
                <el-radio label="理工类(汉语言),515,排名10000"></el-radio>
                <el-radio label="理工类(民考汉),494,排名1000"></el-radio>
                <el-radio label="理工类(民语言),304,排名5000"></el-radio>
                <el-radio label="理工类(双语班),392,排名3000"></el-radio>
              </el-radio-group>-->
            </el-form-item>

            <el-form-item>
              <!-- <Verify @success="letterDialog()" :type="1" @error="codeError()" :codeLength="4" v-model="inputCode" height="100%"></Verify> -->
              <div class="identifybox" style="padding: 0 !important;">
                <el-form-item prop="verifycode">
                  <!-- 注意：prop与input绑定的值一定要一致，否则验证规则中的value会报undefined，因为value即为绑定的input输入值 -->
                  <el-input
                    v-model="inputCode"
                    placeholder="请输入验证码"
                    class="identifyinput"
                    size="small"
                    style="width: 70% !important;"
                  ></el-input>
                </el-form-item>
                <div @click="refreshCode" style="margin-top: 1rem;">
                  <s-identify :identifyCode="identifyCode"></s-identify>
                </div>
                <el-button @click="refreshCode" type="text" class="textbtn">看不清，换一张</el-button>
              </div>
            </el-form-item>

            <el-form-item>
              <!-- <el-button id="submit_btn1" style="margin:0;width:80%" @click="zjzdyfx">立即体验</el-button>    -->
              <el-button
                @click="letterDialog()"
                id="submit_btn1"
                style="margin:0;width:80%"
                size="small"
              >立即体验</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <!-- 已登录-->
    <div class="container2" v-if="isLogin">
      <router-link to="/colleagerecommend">
        <img src="../../assets/1920_937/c.png" alt class="gdap-homepage-6">
      </router-link>

      <!-- <div class="overlay3" >
        <div style="  font-family:SiYuanBold;color:rgb(207, 139, 50);font-size:24px;text-align: center;">
          <p style="  font-family:SiYuanBold;color:rgb(207, 139, 50);font-size:24px;text-align: center;">院 校 录 取 预 测</p>
          <p style="font-family:Oswald;color:rgb(187, 187, 187);font-size: 10px;margin-top:-15px">COLLEGE MAJOR GUIDE
          </p>
          <img src="../../assets/1920_937/AA.png" alt
            style="margin:12% 40%;horiz-align: center;font-size: 16px;display: block;margin-top:-1px">
         
        </div>
      </div>-->
    </div>

    <el-dialog
      title="免责声明"
      :visible.sync="mzsmdialogVisible"
      width="60%"
      :modal="false"
      :before-close="handleMianzeClose"
    >
      <p style="font-weight: bold">
        1、本系统无法向体育类、艺术类、及三校高职类考生提供辅助推荐，而且为考生生成的推荐中不包含军校、警校、国防生、免费师范等本专科提前批次计划，以及定向就业、人民警察子女计划、新疆军区子女计划、边防军人计划、高水平运动员、华侨等特殊招生计划
        <span>，强烈建议以上考生不要支付；</span>
      </p>

      <p>2、“新疆高考志愿辅助填报系统”根据往年高校录取情况，结合当年高考录取政策、考生考试情况，为考生推荐各批次志愿学校和专业，供考生和家长参考。考生在正式进行网上志愿填报时，应向相关高校进一步咨询确认，以完善志愿表；</p>

      <p>3、由于各高校每年的招生计划、招生专业都会进行一定程度的调整，因此“新疆高考志愿辅助填报系统”提供的院校招生专业数据可能会有变动，考生在填报志愿时，请以高校最新发布的招生计划信息为准，并咨询具体学校；</p>

      <p>4、由于考生去向的不确定性，高考志愿填报将具有一定的风险，“新疆高考志愿辅助填报系统”根据往年高校录取情况，结合当年高考录取政策、考生考试情况，为考生提供相关建议，仅供填报志愿时参考，考生在具体填报志愿时，应根据自身情况填写，更多问题请向相关高校进一步咨询。因为高考招生录取的特殊性，本系统不对录取结果提供担保。</p>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="mzsmdialogVisible = false">我知道了</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="请花点时间阅读"
      :visible.sync="letterdialogVisible"
      width="60%"
      :modal="false"
      :before-close="handleClose"
      :append-to-body="true"
    >
      <h3 align="center">致新疆2018年高考考生及家长的公开信</h3>
      <p>亲爱的同学和家长们：</p>
      <p style="text-indent: 2em">你们好，欢迎体验全国首个为新疆考生量身定做的高考志愿辅助填报系统！</p>
      <p
        style="text-indent: 2em"
      >十年寒窗，十年付出，成绩已成定局！现在已然到了填报志愿这一影响人生的重要时刻。少则三五千、多则上万元的各类所谓志愿填报指导，真能圆您理想大学之梦吗？花钱是小事，失误悔终身！在此我们特别要提醒各位考生和家长：科学填报、远离“砖家”！</p>
      <p
        style="text-indent: 2em"
      >本系统是中国科学院新疆理化所组织牵头专为新疆考生打造的高考志愿辅助填报平台，研发团队由多名教授、博士及行业专家顾问组成。系统具有如下特点：</p>
      <p
        style="text-indent: 2em"
      >1、系统依据新疆历年的考生成绩、区内外高校在疆招生计划及实际录取情况数据，建立了高考志愿推荐模型，并用历史真实数据验证了系统的准确性。</p>
      <p style="text-indent: 2em">2、系统采用“名次定位”为主的方法，计算分析所有高校和专业录取的可能性，智能化地推荐各档次9个平行高考志愿，避免高分低就和志愿撞车。</p>
      <p style="text-indent: 2em">3、如果您已经选择了志愿，本系统也可计算出所选志愿的录取概率，并给出分析依据和理由，以供参考决策。</p>
      <p
        style="text-indent: 2em"
      >为新疆高考考生和家长服务是研发本系统的宗旨，精准源于数据，诚信传递信任，如果系统对您有帮助，请您为我们广为宣传，帮助别人就是帮助自己！</p>
      <p style="text-indent: 2em">祝金榜题名，实现理想大学之梦！</p>

      <p>
        <span style="float:right;text-align:center;">中国科学院新疆理化技术研究所</span>
      </p>
      <p>
        <br>
      </p>
      <p>
        <span style="float:right;text-align:center;">新疆云计算中心</span>
      </p>
      <br>
      <br>
      <span slot="footer" class="dialog-footer">
        <el-button :disabled="testBtn" type="primary" @click="goTest">
          去体验
          <span v-if="testInfo">({{letterDialogTime}}秒)</span>
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>





<script>
import { getIp, getCity, getBrowser } from "../../utils/utils";
import {
  languageList,
  categoryList,
  testUserLis
} from "../../constants/constants";

import api from "@/utils/api";
import Verify from "vue2-verify";
import SIdentify from "../../components/common/sidentify.vue";
export default {
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.registerForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    var validatePassReset2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.resetPaswdFrom.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    var validateMsgCode = (rule, value, callback) => {
      if (this.validateCode !== "") {
        if (value !== this.validateCode) {
          callback(new Error("验证码错误!"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };

    var validateMsgCodeReset = (rule, value, callback) => {
      if (this.validateCodeReset !== "") {
        if (value !== this.validateCodeReset) {
          callback(new Error("验证码错误!"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    return {
      testBtn: true,
      testInfo: true,
      letterDialogTime: 5,
      inputCode: "",
      form: "",
      show: true,
      showResetFrom: false,
      selectIndex: "",
      isLogin: localStorage.getItem("user"),
      loginModalVisible: false,
      identifyCodes: "1234567890",
      identifyCode: "",
      resetPaswdFrom: {
        username: "",
        password: "",
        passwordCheck: "",
        messageCode: ""
      },
      registerForm: {
        username: "",
        password: "",
        passwordCheck: "",
        messageCode: "",
        language: "",
        category: ""
      },
      languageList: languageList,
      categoryList: categoryList,
      testUserLis: testUserLis,
      IsDisabled: false,
      IsDisabledReset: false,
      validateCode: "",
      validateCodeReset: "",
      codeInfo: "获取验证码",
      codeInfoReset: "获取验证码",
      loginForm: {
        username: "",
        pass: ""
      },
      //验证码倒计时
      wait: 15,
      waitReset: 15,
      mzsmdialogVisible: false,
      letterdialogVisible: false,
      rulesLogin: {
        username: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur"
          },
          {
            pattern: /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/,
            message: "请输入正确的手机号"
          }
        ],
        pass: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          },
          {
            min: 6,
            max: 18,
            message: "长度在6到18个字符",
            trigger: "blur"
          }
        ]
      },
      rules: {
        username: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur"
          },
          {
            pattern: /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/,
            message: "请输入正确的手机号"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          },
          {
            min: 6,
            max: 18,
            message: "长度在6到18个字符",
            trigger: "blur"
          }
        ],
        passwordCheck: [
          {
            required: true,
            validator: validatePass2,
            trigger: "blur"
          }
        ],
        category: [
          {
            required: true,
            message: "请选择科类",
            trigger: "blur"
          }
        ],
        language: [
          {
            required: true,
            message: "请选择语种",
            trigger: "blur"
          }
        ],
        messageCode: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur"
          },
          {
            validator: validateMsgCode
          }
        ]
      },
      rulesReset: {
        username: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur"
          },
          {
            pattern: /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/,
            message: "请输入正确的手机号"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          },
          {
            min: 6,
            max: 18,
            message: "长度在6到18个字符",
            trigger: "blur"
          }
        ],
        passwordCheck: [
          {
            required: true,
            validator: validatePassReset2,
            trigger: "blur"
          }
        ],
        messageCode: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur"
          },
          {
            validator: validateMsgCodeReset
          }
        ]
      }
    };
  },
  components: {
    Verify,
    SIdentify
  },
  mounted() {
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);

    var ip = getIp();
    var ipCity = getCity();
    var browserMsg = getBrowser();
    var domain = window.location.host;
    var ind = domain.indexOf(".");
    domain = domain.substring(0, ind);
    api({
      url:
        "/nceeSysMgr/rest/sendGet/analysis/rest/visitHisStore?domainName=" +
        domain +
        "&ip=" +
        ip +
        "&ipCity=" +
        encodeURI(ipCity) +
        "&browser=" +
        browserMsg +
        "&type=mobile",
      method: "get"
    }).then(res => {});
  },
  methods: {
    // 生成随机数
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    // 切换验证码
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    // 生成四位随机验证码
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ];
      }
      console.log(this.identifyCode);
    },

    letterDialog() {
      if (this.selectIndex !== "" && this.inputCode !== this.identifyCode) {
        this.$notify({
          message: "验证码错误",
          type: "warning"
        });
      } else if (this.selectIndex === "" && this.inputCode !== "") {
        this.$notify({
          message: "请选择试用用户",
          type: "warning"
        });
      } else if (this.selectIndex === "" && this.inputCode === "") {
        this.$notify({
          message: "请选择试用用户并填写验证码验证",
          type: "warning"
        });
      } else {
        this.letterdialogVisible = true;
        let clock = window.setInterval(() => {
          this.letterDialogTime--;
          if (this.letterDialogTime < 1) {
            window.clearInterval(clock);
            this.testBtn = false;
            this.testInfo = false;
          }
        }, 1000);
      }
    },
    codeError() {
      this.$notify({
        message: "验证码有误",
        type: "warning"
      });
    },
    goTest() {
      for (var i in testUserLis) {
        if (testUserLis[i].id === this.selectIndex) {
          console.log(testUserLis[i]);
          for (var j in categoryList) {
            if (categoryList[j].value === testUserLis[i].kldm)
              this.$store.dispatch("estimate/getKldm", categoryList[j]);
          }
          this.$store.state.common.stepIndex = 1;
          this.$store.dispatch("estimate/getZf", testUserLis[i].zf);
          this.$store.dispatch("estimate/getYzmc", testUserLis[i].yzmc);
          this.$store.dispatch("estimate/getPx", testUserLis[i].px);
          if (!localStorage.getItem("user")) {
            const user = {
              userId: testUserLis[i].userId
            };
            localStorage.setItem("testuser", JSON.stringify(user));
          }
        }
      }

      this.$router.push("/step/choosearea");
      this.identifyCode = "";
    },
    fnShowReset() {
      this.showResetFrom = !this.showResetFrom;
    },
    fnSendMessageCode() {
      var regex = /^1[3|4|5|7|8][0-9]\d{8}$/;
      if (regex.test(this.registerForm.username)) {
        this.validateCode = ""; //验证码
        for (var i = 0; i < 5; i++) {
          this.validateCode += Math.floor(Math.random() * 10);
        }
        var selectChar = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9);
        var charIndex = Math.floor(Math.random() * 9);
        this.validateCode = selectChar[charIndex] + this.validateCode;
        console.log(this.validateCode);

        //获取验证码接口 测试时先注释
        api({
          url: "/nceeSysMgr/rest/LoginUtil/sendValidateCode",
          method: "post",
          data: {
            tel: this.registerForm.username,
            code: this.validateCode
          }
        }).then(res => {
          if (res.status == 200) {
            if (res.data) {
              this.time();
            }
          }
        });
      }
    },
    fnSendResetMessageCode() {
      var regex = /^1[3|4|5|7|8][0-9]\d{8}$/;
      if (regex.test(this.resetPaswdFrom.username)) {
        this.validateCodeReset = ""; //验证码
        for (var i = 0; i < 5; i++) {
          this.validateCodeReset += Math.floor(Math.random() * 10);
        }
        var selectChar = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9);
        var charIndex = Math.floor(Math.random() * 9);
        this.validateCodeReset = selectChar[charIndex] + this.validateCodeReset;
        console.log(this.validateCodeReset);
        //获取验证码接口 测试时先注释
        // api({
        //   url: "/nceeSysMgr/rest/LoginUtil/sendValidateCode",
        //   method: "post",
        //   data: {
        //     tel: this.resetPaswdFrom.username,
        //     code: this.validateCodeReset
        //   }
        // }).then(res => {
        //   if (res.status == 200) {
        //     if (res.data) {
        //       this.timeForReset()
        //     }
        //   }
        // });
      }
    },
    time() {
      var _this = this;
      if (_this.wait == 0) {
        _this.wait = 60;
        this.codeInfo = "获取验证码";
        this.IsDisabled = false;
      } else {
        _this.wait--;
        this.IsDisabled = true;
        console.log(_this.wait);
        this.codeInfo = _this.wait + "秒后重试";
        setTimeout(function() {
          //倒计时方法
          _this.time();
        }, 1000); //间隔为1s
      }
    },
    timeForReset() {
      var _this = this;
      if (_this.waitReset == 0) {
        _this.waitReset = 60;
        this.codeInfoReset = "获取验证码";
        this.IsDisabledReset = false;
      } else {
        _this.waitReset--;
        this.IsDisabledReset = true;
        console.log(_this.waitReset);
        this.codeInfoReset = _this.waitReset + "秒后重试";
        setTimeout(function() {
          //倒计时方法
          _this.timeForReset();
        }, 1000); //间隔为1s
      }
    },
    reSetPaswdFrom(formName) {
      this.$refs[formName].resetFields();
    },
    fnResetpasswd(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          api({
            url: "/nceeSysMgr/rest/LoginUtil/gkRetrievePwd",
            method: "post",
            data: {
              username: this.resetPaswdFrom.username,
              password: this.resetPaswdFrom.password
            }
          }).then(res => {
            if (res.status == 200) {
              console.log(res.data);
              switch (res.data) {
                case 0:
                  this.$message({
                    message: "用户不存在！",
                    type: "warning"
                  });
                  break;
                case 1:
                  this.$refs[formName].resetFields();
                  // this.showResetFrom = !this.showResetFrom
                  this.$message({
                    message: "重置密码成功！",
                    type: "success"
                  });
                  break;
                case -1:
                  this.$message({
                    message: "密码重置失败，请重试！",
                    type: "error"
                  });
                  this.reSetRegisFrom("registerForm");
                  break;
                default:
                  break;
              }
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    reSetRegisFrom(formName) {
      this.$refs[formName].resetFields();
    },
    fnRegist(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          //保存用户类型（是否团购用户）
          var href = window.location.href;
          var userSource = href.substring(
            href.indexOf("//") + 2,
            href.indexOf(".tianshanzw")
          );
          //注册接口
          api({
            url: "/nceeSysMgr/rest/AuthorityUtil/registerAndGiveOrder",
            method: "post",
            data: {
              userId: this.registerForm.username,
              currentPassword: this.registerForm.password,
              kldm: this.registerForm.category,
              yzmc: this.registerForm.language,
              userSource: userSource,
              userType: "0",
              recommendNum: "0",
              editXYNum: "0"
            }
          }).then(res => {
            if (res.status == 200) {
              console.log(res.data);
              switch (res.data.registerCode) {
                case -2:
                  this.$message({
                    message: "参数错误，请联系管理员！",
                    type: "warning"
                  });
                  break;
                case -1:
                  this.$message({
                    message: "程序错误，请联系管理员！",
                    type: "warning"
                  });
                  break;
                case 0:
                  this.$message({
                    message: "已存在该用户,请直接使用用户名密码进行登录！",
                    type: "warning"
                  });
                  this.reSetRegisFrom("registerForm");
                  break;
                default:
                  this.reSetRegisFrom("registerForm");
                  this.$message({
                    message: "注册完成！",
                    type: "success",
                    duration: 800,
                    onClose: () => {
                      this.getUserInfo();
                    }
                  });
                  break;
              }
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    getUserInfo() {
      api({
        url: "/nceeSysMgr/rest/LoginUtil/getUserInfo",
        method: "get"
      }).then(res => {
        console.log(res.data);
        if (res.data !== null && res.data !== "") {
          const user = JSON.stringify(res.data);
          localStorage.setItem("user", user);
          window.location.reload();
        }
      });
    },
    showRegis() {
      this.show = !this.show;
    },
    loginModal() {
      if (!localStorage.getItem("user")) {
        this.loginModalVisible = true;
      } else {
        this.$router.push("/step/estimatescore");
      }
    },
    loginResetClose(formName) {
      this.$refs[formName].resetFields();
    },
    handleClose(form) {
      this.letterdialogVisible = false;
    },
    handleMianzeClose() {
      this.mzsmdialogVisible = false;
    },
    handleSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          api({
            url: "/nceeSysMgr/rest/LoginUtil/login",
            method: "post",
            data: {
              username: this.loginForm.username,
              password: this.loginForm.pass
            }
          }).then(res => {
            if (res.data.state === "success") {
              const user = res.data.user;
              localStorage.setItem("user", user);
              window.location.reload();
              if (localStorage.getItem("testuser"))
                localStorage.removeItem("testuser");
            } else {
              this.$notify({
                message: "用户名或密码错误，请重新登录",
                type: "warning"
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>


<style scoped>
.gdap-homepage-1 {
  width: 32%;
  top: 0;
  display: block;
  float: left;
  z-index: 99;
}

.gdap-homepage-2 {
  width: 41%;
  display: block;
  top: 0;
  float: left;
  z-index: 100;
}

.gdap-homepage-3 {
  width: 27%;
  display: block;
  top: 0;
  float: right;
  z-index: 101;
}

.gdap-homepage-4 {
  width: 100%;
  display: block;
  z-index: 102;
}

.gdap-homepage-5 {
  width: 41%;
  display: block;
  z-index: 103;
}

.gdap-homepage-6 {
  display: block;
  z-index: 104;
  width: 27%;
  bottom: 0;
  float: right;
  right: 0;
  position: absolute;
}

.container {
  width: 32%;
  position: absolute;
  bottom: 0;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: 0.5s ease;
  overflow-y: auto;
}

.overlay2 {
  position: absolute;
  bottom: 0;
  float: right;
  right: 0;
  background-color: #ffffff;
  overflow: hidden;
  overflow-y: scroll;
  width: 27%;
  height: 0;
  transition: 0.5s ease;
  z-index: 105;
}

.overlay3 {
  position: absolute;
  bottom: 0;
  float: right;
  right: 0;
  background-color: #ffffff;
  overflow: hidden;
  width: 27%;
  height: 0;
  transition: 0.5s ease;
  z-index: 105;
}

.my_class:hover .overlay {
  height: 100%;
}
.gdap-homepage-3-div:hover .overlay {
  height: 100%;
  cursor: pointer;
}

.container:hover .overlay {
  height: 180%;
}

.container2:hover .overlay2 {
  height: 100%;
}

.container2:hover .overlay3 {
  height: 51%;
}

.el-input {
  width: 80%;
}

.el-radio {
  margin: 10px -10%;
  font-family: "Arial", "Microsoft YaHei", "黑体";
  font-size: 14px;
}

.hh {
  background: #fff;
  border-radius: 0;
  border: 1px solid #ccc;
  box-sizing: border-box;
  cursor: pointer;
  min-width: 160px;
}

.gdap-forget:hover {
  text-decoration: underline;
}

.el-select-dropdown__wrap {
  max-height: 50vh !important;
}

#myCanvas1 {
  height: 40px;
  width: 60%;
  margin: 0 10px;
  border-radius: 2px;
  background-color: #fff;
  border-bottom: solid 1px #ccc;
}
.el-input__inner {
  border-radius: 0 !important;
}

.input:-internal-autofill-selected {
  background-color: #fff !important;
  opacity: 0.9;
}
.el-form-item.is-success .el-input__inner {
  border-color: #ccc !important;
  opacity: 0.9;
}
.cerify-code-panel {
  width: 10em;
}
.gdap-register {
  text-align: center;
}
.gdap-login {
  margin-top: 10%;
  text-align: center;
}
.gdap-reset {
  margin-top: 10%;
  text-align: center;
}
</style>